<!DOCTYPE html>
<html>

<head>
    <title>SVG Demo 07</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        div {
            float: left;
        }
    </style>
</head>

<body>
    <h1>Demo07：组合元素</h1>
    <ul>
        <li>Pattern</li>
        <li>Marker</li>
    </ul>
    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <pattern id="p1" x="0" y="0" width="20" height="20"
                    patternUnits="userSpaceOnUse">
                        <circle cx="10" cy="10" r="10" stroke="none" fill="#393" />
                </pattern>
                <pattern id="p2" x="10" y="10" width="20" height="20"
                    patternUnits="userSpaceOnUse">
                        <circle cx="10" cy="10" r="10" stroke="none" fill="#393" />
                </pattern>
                <pattern id="p3" x="0" y="0" width="25" height="25"
                    patternUnits="userSpaceOnUse">
                        <circle cx="10" cy="10" r="10" stroke="none" fill="#393" />
                </pattern>
                <pattern id="p4" x="0" y="0" width="20" height="20"
                    patternUnits="objectBoundingBox">
                        <circle cx="10" cy="10" r="10" stroke="none" fill="#393" />
                </pattern>
                <pattern id="p5" x="0" y="0" width="0.2" height="0.2"
                    patternUnits="objectBoundingBox">
                        <circle cx="10" cy="10" r="10" stroke="none" fill="#393" />
                </pattern>
            </defs>
            <rect x="0" y="0" width="120" height="120" fill="url(#p1)"></rect>
        </svg>
    </div>
    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect x="0" y="0" width="120" height="120" fill="url(#p2)"></rect>
        </svg>
    </div>
    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect x="0" y="0" width="120" height="120" fill="url(#p3)"></rect>
        </svg>
    </div>
    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="10" width="100" height="100" rx="10" ry="10" fill="url(#p4)" stroke="red" stroke-width="1"></rect>
        </svg>
    </div>
    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="10" width="100" height="100" rx="10" ry="10" fill="url(#p5)" stroke="red" stroke-width="1"></rect>
        </svg>
    </div>
    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="10" width="100" height="100" fill="red" stroke="url(#p1)" stroke-width="20"></rect>
        </svg>
    </div>
    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="10" width="100" height="100" fill="red" stroke="url(#p2)" stroke-width="20"></rect>
        </svg>
    </div>



    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <marker id="m1"
                    viewBox="0 0 20 20"
                    refX="0" refY="3"
                    markerWidth="20"
                    markerHeight="20"
                    markerUnits="strokeWidth"
                    orient="auto">
                    <path d="M0,0 L0,6 L9,3 z" fill="#f00" />
                </marker>
                <marker id="m2"
                    viewBox="0 0 20 20"
                    refX="0" refY="3"
                    markerWidth="20"
                    markerHeight="20"
                    markerUnits="userSpaceOnUse"
                    orient="auto">
                    <path d="M0,0 L0,6 L9,3 z" fill="#f00" />
                </marker>
                <marker id="m3"
                    viewBox="0 0 20 20"
                    refX="0" refY="3"
                    markerWidth="20"
                    markerHeight="20"
                    markerUnits="userSpaceOnUse"
                    orient="40">
                    <path d="M0,0 L0,6 L9,3 z" fill="#f00" />
                </marker>
            </defs>
            <path d="M0,0 L0,6 L9,3 z" fill="#f00" />
            <line x1="10" y1="10" x2="90" y2="10" stroke="#000" stroke-width="5" marker-end="url(#m1)" />
            <line x1="10" y1="30" x2="90" y2="30" stroke="#000" stroke-width="1" marker-end="url(#m1)" />
            <line x1="10" y1="40" x2="90" y2="40" stroke="#000" stroke-width="5" marker-end="url(#m2)" />
            <line x1="10" y1="50" x2="90" y2="50" stroke="#000" stroke-width="1" marker-end="url(#m2)" />
            <line x1="10" y1="50" x2="90" y2="60" stroke="#000" stroke-width="1" marker-end="url(#m2)" />
            <line x1="10" y1="50" x2="90" y2="70" stroke="#000" stroke-width="1" marker-end="url(#m3)" />
            <line x1="10" y1="50" x2="90" y2="100" stroke="#000" stroke-width="1" marker-end="url(#m3)" />
        </svg>
    </div>


    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <marker id="m4"
                    viewBox="0 0 20 20"
                    refX="0" refY="5"
                    markerWidth="10"
                    markerHeight="10"
                    markerUnits="strokeWidth"
                    orient="auto">
                    <path d="M0,0 L0,10 L10,5 z" fill="#f00" />
                </marker>
                <marker id="m5"
                    viewBox="0 0 5 5"
                    refX="0" refY="0"
                    markerWidth="5"
                    markerHeight="5"
                    markerUnits="strokeWidth"
                    orient="auto">
                    <circle cx="2.5" cy="2.5" r="2.5" fill="#f00"/>
                </marker>
            </defs>

            <polyline points="0,0 30,30 30,70 70,70 100,50" fill="none" stroke="blue" stroke-width="1" marker-start="url(#m5)" marker-mid="url(#m5)" marker-end="url(#m4)"/>
        </svg>
    </div>


    <svg width="600px" height="400px" class="example">
        <defs>
             <marker id="arrow" markerWidth="10" markerHeight="10" refx="0" refy="3" orient="auto" markerUnits="strokeWidth" viewBox="0 0 20 20">
                 <path d="M0,0 L0,6 L9,3 z" fill="#f00" />
             </marker>
        </defs>
        <marker id="circle" markerWidth="4" markerHeight="4" refx="2" refy="2">
            <circle cx="2" cy="2" r="2" stroke="none" fill="#f00"/>
        </marker>
        <polyline points="50,100 250,100 250,200 350,200" fill="none" stroke="#000" stroke-width="10" marker-end="url(#arrow)" marker-start="url(#circle)" marker-mid="url(#circle)" />
        <path d="M50,100 l0,200 l50,0" stroke="#000" fill="none" stroke-width="10" marker-end="url(#arrow)" marker-start="url(#circle)" marker-mid="url(#circle)" />
        <line x1="50" y1="100" x2="220" y2="270" stroke="#000" stroke-width="10" marker-end="url(#arrow)" marker-start="url(#circle)" marker-mid="url(#circle)"/>
    </svg>



    <svg width="8cm" height="3cm" viewBox="0 0 800 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <linearGradient id="Gradient" gradientUnits="userSpaceOnUse"
                x1="0" y1="0" x2="800" y2="0">
                <stop offset="0" stop-color="white" stop-opacity="0" />
                <stop offset="1" stop-color="white" stop-opacity="1" />
            </linearGradient>
            <mask id="Mask" maskUnits="userSpaceOnUse"
                x="0" y="0" width="800" height="300">
                <rect x="0" y="0" width="800" height="300" fill="url(#Gradient)" />
            </mask>
            <text id="Text" x="400" y="200"
                font-family="Verdana" font-size="100" text-anchor="middle" >
                Masked text
            </text>
        </defs>
        <!-- 视窗的背景 -->
        <rect x="0" y="0" width="800" height="300" fill="#FF8080" />

        <!-- 第一步绘制一个带有蒙板的Text，可以看到蒙板的透明度效果已经应用到字上了.
        第二步是绘制一个不带蒙板的Text，来作为第一步Text的轮廓 -->
        <use xlink:href="#Text" fill="blue" mask="url(#Mask)" />
        <use xlink:href="#Text" fill="none" stroke="black" stroke-width="2" />
    </svg>
</body>

</html>